ul,li {
  padding 0
  margin 0
}
li {
  list-style none
}
.icon {
  display inline-block
  width 20px
  height 20px
  background no-repeat center center
  background-size 100%
  &.comments {
    background-image url('')
  }
  &.like {
    background-image url('')
  }
}
.loading {
  position relative
  display block
  margin 20px auto
  height 100px
  width 100px
  line-height 100px
  font-style normal
  font-size 12px
  text-align center
  border 0
  outline none
  color #42b983
  border-radius 50%
  background #fff
  cursor pointer
  &::before,
  &::after {
    position absolute
    left 0
    top 0
    height 100px
    width 100px
    border-radius 50%
    border-style solid
    border-width 2px
    box-sizing border-box
    content ''
  }
  &::before{
    border-color #c7c7c7
  }
  &::after {
    border-radius 50%
    border-style solid
    border-width 4px
    box-sizing border-box
    content ''
    left 0
    position absolute
    top 0
    animation MoreLoadingAnimation 2s infinite ease
    border-color #42b983 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)
    transform-origin 50%
  }
}



body {
  margin 0
  padding 0
  height 100%
  background-color #f2f3f5
}
#forkme_banner {
  display block
  position absolute
  top 0
  right 10px
  z-index 10
  padding 10px 40px 10px 10px
  color #fff
  font-weight 700
  box-shadow 0 0 10px rgba(0,0,0,0.5)
  border-bottom-left-radius 2px
  border-bottom-right-radius 2px
  span {
    margin-right 5px
  }
  &::after {
    content ''
    position absolute
    width 30px
    height 30px
    background url(./assets/github.png) no-repeat center center
    background-size 100% 100%
    top 5px
  }
}

#app {
  display flex
  align-items center
  justify-content center
  padding-top 80px
  color #2c3e50
  background-color #fff
  font-family Lucida Grande,Helvetica Neue,Helvetica,Arial,Hiragino Sans GB,Hiragino Sans GB W3,WenQuanYi Micro Hei,Microsoft YaHei UI,Microsoft YaHei,sans-serif
  font-size 15px
  background-color #f2f3f5
}
.view {
  padding 0 25px
  margin-bottom 35px
  padding-bottom 15px
  width 750px
  background #fff
}


.global-header {
  width 100%
  position fixed
  top 0
  left 0
  height 60px
  background-color #42b983
  z-index 1000
  .wrap {
    width 800px
    margin auto
    line-height 60px
  }
  img {
    display inline-block
    width 126px
    height 42px
    vertical-align middle
  }
  .power {
    float right
    margin 0
    color #fff
  }
}
a {
  color #42b983
  text-decoration none
  &:hover { 
    text-decoration underline
  }
}

.fade-enter-active, .fade-leave-active {
  transition all .2s ease
}
.fade-enter, .fade-leave-active {
  opacity 0
}


@media (max-width: 500px) {
  #forkme_banner {
    width 30px
    height 30px
    padding 5px
    background-position center center
    right 0
    span {
      display none
    }
  }
  .global-header {
    height 40px
    .wrap {
      width 100%
      line-height 40px
      margin-left 10px
      img {
        width 63px
        height 21px
      }
      .power {
        display none
      }
    }
  }
  #app {
    padding-top 40px
  }
  .view {
    padding 0 5px
    width 100%
    overflow hidden
    &.detail {
      padding 0 10px
    }
  }
}